<template>
	<view class="personal_information">
		<view class="custom_from_card">
			<view class="custom_from_card_input">
				<view class="custom_from_card_left">
					<text class="custom_from_card_left_required">*</text>用户昵称
				</view>
				<view class="custom_from_card_input_rigth">
					<u-input placeholder="请输入用户昵称" inputAlign="right" v-model="fromValue.realname" border="none"
						:clearable="true" type="nickname" placeholder-class="placeholder"></u-input>
				</view>
			</view>
			<button class="custom_from_card_avatar btn_style" open-type="chooseAvatar" @chooseavatar="handleUplad">
				<view class="custom_from_card_left">
					<text class="custom_from_card_left_required">*</text>用户头像
				</view>
				<view class="custom_from_card_avatar_right">
					<image :src="fromValue?.avatar" v-if="fromValue?.avatar" class="custom_from_card_avatar_right_img"> </image>
					<text v-else class="placeholder">请选择头像</text>
					<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
				</view>
			</button>
			<view class="custom_from_card_select" @click="handleSex()">
				<view class="custom_from_card_left">
					<text class="custom_from_card_left_required">*</text>性别
				</view>
				<view class="custom_from_card_select_rigth">
					<text v-if="fromValue?.sex" class="custom_from_card_select_rigth_text">{{sexText}}</text>
					<text v-else class=" custom_from_card_select_rigth_text placeholder">请选择</text>
					<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="custom_from_card_input">
				<view class="custom_from_card_left">
					<text class="custom_from_card_left_required">*</text>手机号码
				</view>
				<view class="custom_from_card_input_rigth">
					<u-input placeholder="请输入手机号码" inputAlign="right" v-model="fromValue.phone" border="none"
						:clearable="true" placeholderClass="placeholderClass"></u-input>
				</view>
			</view>
		</view>
		<view class="custom_form_btn btn_style" @click="handleSave">提交</view>
		<!--  性别选择-->
		<u-picker :show="isSexShow" :columns="columns" keyName="text" @confirm="handleSexConfirm"
			@cancel="handleSexCancel"></u-picker>
	</view>
</template>
<script lang="ts" setup>
	import { ref, onMounted, reactive, computed, toRaw, unref, getCurrentInstance } from "vue";
	import { getDictItemsByCode, upload } from '@/common/sys.api';
	import { wfWxUserEdit } from '@/common/mine.api';
	import { onLoad } from "@dcloudio/uni-app";


	// 表单数据
	const fromValue = ref({
		"avatar": "",
		"id": "",
		"phone": "",
		"realname": "",
		"sex": '',
	});
	const isSexShow = ref(false);
	const urlParams = ref();
	const columns = reactive([]);
	const { proxy } = getCurrentInstance();


	onMounted(async () => {
		let res = await getDictItemsByCode({ dictCode: 'sex' });
		columns.push(res);
		// 用户信息
		fromValue.value = JSON.parse(JSON.stringify(unref(proxy['vuex_user'])));
	});

	onLoad((params) => {
		urlParams.value = params;
	})

	/**
	 * 性别中文显示
	 */
	const sexText = computed(() => {
		if (fromValue.value?.sex && columns?.length > 0) {
			let arrFilter = toRaw(columns)[0]?.filter(item => item?.value == fromValue.value?.sex);
			if (arrFilter?.length > 0) {
				return arrFilter[0]['text'];
			}
			return '';
		}
		return '';
	})

	/**
	 * 头像上传
	 */
	async function handleUplad(e) {
		const res = await upload({ filePath: e?.detail?.avatarUrl, name: 'file', custom: { toast: false } });
		console.log(res, 'res');
		fromValue.value.avatar = res;
	}

	/**
	 * 性别选择
	 */
	function handleSex() {
		isSexShow.value = true;
	}

	/**
	 * 性别选择器 确认
	 */
	function handleSexConfirm(arr) {
		console.log(arr.value[0].value, 'arr');
		if (arr?.value?.length > 0) {
			fromValue.value.sex = arr.value[0].value;
		}
		isSexShow.value = false;
	}

	/**
	 * 性别选择器 取消
	 */
	function handleSexCancel() {
		isSexShow.value = false;
	}

	/**
	 * 保存
	 */
	async function handleSave() {
		const params = unref(fromValue);
		console.log(params, 'params');
		if (params?.realname === '' || !params?.realname) {
			return uni.showToast({
				icon: 'none',
				title: '请输入昵称！'
			})
		}
		if (params?.avatar === '' || !params?.avatar) {
			return uni.showToast({
				icon: 'none',
				title: '请上传头像！'
			})
		}
		if (params?.sex === '' || !params?.sex) {
			return uni.showToast({
				icon: 'none',
				title: '请选择性别！'
			})
		}
		if (params?.phone === '' || !params?.phone) {
			return uni.showToast({
				icon: 'none',
				title: '请输入手机号码！'
			})
		}
		if (!uni.$u.test.mobile(params?.phone)) {
			return uni.showToast({
				icon: 'none',
				title: '请输入正确格式手机号码！'
			})
		}
		if (params?.alternatePhone && !uni.$u.test.mobile(params?.phone)) {
			return uni.showToast({
				icon: 'none',
				title: '请输入正确格式备用电话！'
			})
		}
		await wfWxUserEdit(params);
		// 缓存信息
		uni.$u.vuex('vuex_user', params);
		uni.showToast({
			icon: 'none',
			title: '保存成功'
		})
		// 登录过来跳转至首页
		if (unref(urlParams)?.type === 'login') {
			uni.$u.route({
				type: 'switchTab',
				url: 'pages/index/index'
			})
		} else {
			uni.$u.route({
				type: 'back',
			})
		}
	}
</script>

<style lang="scss" scoped>
	.personal_information {
		margin-top: 10rpx;
		height: calc(100vh - 10rpx);
		background-color: #fff !important;

		.custom_from_card_avatar {
			// height: 88rpx;
		}

		.custom_from_card_select {
			// height: 55rpx;

			.custom_from_card_select_rigth {

				.custom_from_card_select_rigth_text {
					line-height: 58rpx;
				}
			}
		}

		.custom_form_btn {
			width: 466rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #FF5046;
			color: #fff;
			border-radius: 49rpx;
			font-size: 32rpx;
			margin: 0 auto;
			text-align: center;
			font-size: 500;
		}
	}
	
	// 表单样式
	.custom_from_card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 24rpx;
	
		// 左边样式
		.custom_from_card_left {
			font-size: 28rpx;
	
			.custom_from_card_left_required {
				color: #FF5046;
			}
		}
	
		// 上传
		.custom_from_card_upload {
			.custom_from_card_upload_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.custom_from_card_rigth {
					color: #FF5046;
					font-size: 24rpx;
				}
			}
	
			.custom_from_card_upload_imgs {
				margin-top: 30rpx;
				margin-left: 7rpx;
	
				.custom_from_card_upload_imgs_img {
					width: 128rpx;
					height: 128rpx;
					border-radius: 10rpx;
				}
			}
	
			.custom_from_card_upload_input {
				margin-top: 30rpx;
				margin-left: 7rpx;
				font-size: 28rpx;
			}
		}
	
		.custom_from_card_select,
		.custom_from_card_input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #D8D8D8;
			margin-bottom: 30rpx;
	
			&:first-child {
				padding-top: 0;
			}
	
			&:last-child {
				margin-bottom: 0;
			}
		}
	
		// 选择
		.custom_from_card_select {
	
			.custom_from_card_select_rigth {
				display: flex;
				align-items: center;
				line-height: 52rpx;
	
				.custom_from_card_select_rigth_text {
					font-size: 28rpx;
					margin-right: 6rpx;
				}
			}
		}
	
		// 输入框
		.custom_from_card_input {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.custom_from_card_input_rigth {
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				margin-left: 20rpx;
				
				.u-input__content__field-wrapper__field {
					font-size: 28rpx !important;
					line-height: 28rpx !important;
				}
			}
		}
	
		::v-deep .placeholder {
			color: #999999;
		}
		
		// 头像
		.custom_from_card_avatar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #D8D8D8;
			margin-bottom: 30rpx;
			line-height: 28rpx;
			
			.custom_from_card_avatar_right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				
				.custom_from_card_avatar_right_img{
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					margin-right: 4rpx;
				}
			}
		}
	}
</style>